<template>
  <transition name="cnode-reply">
    <div class="cnode-reply-box" v-show="isShow">
      <header class="cnode-reply-header">
        <span class="reply-action" @click="hide">返回</span>
        <span class="reply-title">评论</span> 
        <span class="reply-action" @click="send">发布</span>
      </header>
      <section class="cnode-reply-input-box">
        <textarea 
          class="cnode-reply-input"
          ref="input"
          :placeholder="placeholder"
          v-model="content"></textarea>
      </section>
    </div>
  </transition>
</template>
<script>
import Toast from '@/components/toast'
export default {
  data() {
    return {
      content: '',
      placeholder: '',
      callback: null,
      isShow: 'false',
      bodyEl: document.querySelector('body')
    }
  },
  methods: {
    show() {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    hide() {
      this.isShow = false
    },
    send() {
      if (!this.content) {
        Toast('请输入内容!')
        return
      }
      this.callback(this.content)
    }
  }
}
</script>
<style lang="scss" scoped>
$main-color: #1976d2;
$app-header-height: 52px;
.cnode-reply-box {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
  flex-direction: column;
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}
.cnode-reply-header {
  width: 100%;
  flex-basis: $app-header-height;
  background-color: $main-color;
  color: #fff;
  text-align: center;
  line-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  .reply-title {
    font-size: 22px;
    font-weight: 700;
  }
  .reply-action {
    font-size: 16px;
  }
}
.cnode-reply-input-box {
  flex: 1;
  background: #fff;
}
.cnode-reply-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 16px;
  resize: none;
}
.cnode-reply-enter{
  transform: translate(100%, 0);
}
.cnode-reply-leave-to {
  transform: translate(-100%, 0);
}
</style>

